﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../fly/fly.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/grid/grid.js" type="text/javascript"></script>
    <link href="../../plugins/themes/blue/fly-base.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/grid.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        
    </style>
    <script>
        $(function () {

            //generate data
            var rows = []
            while (rows.length < 200) {
                rows.push([
                    rows.length,
                    Math.random().toString(16).replace(/\d/g, ''),
                    Math.random(),
                    Math.random() + " - " + Math.random(),
                    Math.random(),
                    Math.random(),
                    Math.random()])
            }

            rows[parseInt(Math.random() * 10)].children = [rows.pop(), rows.pop(), rows.pop(), rows.pop(), rows.pop()]

            var r = parseInt(Math.random() * 10)
            rows[r].children = [rows.pop(), rows.pop()]
            rows[r].children[1].children = [rows.pop(), rows.pop()]

            //create store
            var store = new $.data.Store({
                records: rows
                //,remoteSort:true
            });
            
            //create grid
            var panel = new $.ui.grid.GridPanel({
                id: 'panel',
                store: store,
                altRowBy: 3,
                width: 800,
                height: 400,
                //                rowEvents: {
                //                    click: function (row) {
                //                        alert(row.id)
                //                    }
                //                },
                plugins: new $.ui.grid.plugins.TreeGrid({
                    sm: {
                        parentCascade: true,
                        childCascade: true
                    }
                }),
                columns: [
                new $.ui.grid.RowNumberer({
                    format: "{0} in " + rows.length,
                    width: 150
                }),
                {
                    header: 'Mark',
                    rowSpan: 1,
                    columns: [{
                        header: 'First',
                        columns: [{
                            dataIndex: 0,
                            width: 40
                        }]
                    }, {
                        header: 'Second',
                        columns: [1, 2]
                    }]
                },
               {
                   header: 'Mark',
                   columns: [{
                       header: 'First',
                       dataIndex: 0,
                       width: 40
                   }, {
                       header: 'Second',
                       columns: [{
                           header: "Second 1",
                           columns: [3, 4]
                       }, 5]
                   }]
               }]
            })
            panel.render(document.body)
        })
    </script>
    <style>
        body
        {
            background-image: url(../../plugins/themes/images/bgs.png);
            background-repeat: repeat-x;
            background-position: center bottom;
            height: 1000px;
            color: #222222;
            font-size: 12px;
            font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
        }
    </style>
</head>
<body>
</body>
</html>
